:host:not(.collapsed) {
  .pac-router-link {
    @apply hover:bg-black/5 dark:hover:bg-white/10;
  }
  .pac-router-link.active {
    @apply dark:bg-white/20 bg-black/10;
  
    &.has-submenu {
      @apply dark:bg-white/10 bg-black/5;
    }
  }
  .pac-router-link {
    @apply py-3 px-4;
  }
}

.pac-router-link {
  @apply transition-all duration-200 ease-in-out;

  

  &.active {
    .menu-button {
      @apply rounded-xl shadow-lg bg-white text-primary-600;
    }
  }
}

.pac-sub-menu {
  li.pac-router-link {
    @apply h-0 px-4 py-0 opacity-0 invisible transition-all duration-200 ease-in-out;
  }
  &.expanded {
    li.pac-router-link {
      @apply h-10 px-4 py-2 opacity-100 visible;
    }
  }
}